<template>
	<div class="order-delivery-container">
		<el-card class="breadcrumb-card card-form" :style="{height:formHeight+'px'}">
			<!-- 路径导航 -->
			<div slot="header" class="breadcrumb-header">
				<el-page-header @back="$router.back()" title="订单列表" :content="'单号：'+orderInfo.orderSn"/>
				<div class="btn-list">
					<el-button size="small" type="primary" @click="handleDelivery">发货<i class="el-icon-check el-icon--right"/></el-button>
					<el-button size="small" @click="$router.back()">取消<i class="el-icon-close el-icon--right"/></el-button>
				</div>
			</div>
			<el-scrollbar>
				<el-steps class="order-time-line" :active="orderOperateHistoryList.length" align-center>
				  <el-step v-for="(operate, index) in orderOperateHistoryList" :title="operate.operateNote" :description="operate.createTime"/>
					<el-step v-if="orderInfo.status == '1' && orderInfo.orderReturnMoney == 0" title="等待发货"/>
					<el-step v-if="orderInfo.status == '2' && orderInfo.orderReturnMoney == 0" title="等待收货"/>
					<el-step v-if="orderInfo.status == '3' && orderInfo.orderReturnMoney == 0" title="等待评价"/>
				</el-steps>
				<!-- 订单信息 -->
				<el-card class="breadcrumb-card">
					<div slot="header" class="breadcrumb-header fs-14">订单信息</div>
					<el-table size="small" :data="orderInfoList" style="width: 100%">
						<el-table-column prop="cartTotalMoney" align="center" label="购物车">
							<template slot-scope="scope">
								<span class="money">{{scope.row.cartTotalMoney | fentoyuan}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="orderDiscountMoney" align="center" label="订单优惠">
							<template slot-scope="scope">
								<span class="money">{{scope.row.orderDiscountMoney | fentoyuan}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="orderFreightMoney" align="center" label="订单运费">
							<template slot-scope="scope">
								<span class="money">{{scope.row.orderFreightMoney | fentoyuan}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="orderReturnMoney" align="center" label="退款金额">
							<template slot-scope="scope">
								<span class="money">{{scope.row.orderReturnMoney | fentoyuan}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="orderPayMoney" align="center" label="支付金额">
							<template slot-scope="scope">
								<span class="money">{{scope.row.orderPayMoney | fentoyuan}}</span>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<!-- 订单商品 -->
				<el-card class="breadcrumb-card">
					<div slot="header" class="breadcrumb-header fs-14">订单商品</div>
					<el-table size="small" :data="orderItemList" style="width: 100%">
						<el-table-column prop="goodsName" label="商品名称"/>
						<el-table-column prop="goodsPic" align="center" label="图片" width="120">
							<template slot-scope="scope">
								<el-avatar shape="square" :size="40" :src="scope.row.goodsPic"/>
							</template>
						</el-table-column>
						<el-table-column prop="goodsPrice" align="center" label="价格" width="120">
							<template slot-scope="scope">
								<span class="money">{{scope.row.goodsPrice | fentoyuan}}</span>
							</template>
						</el-table-column>	
						<el-table-column prop="goodsNum" align="center" label="数量" width="120"/>
					</el-table>
				</el-card>
				<!-- 订单地址 -->
				<el-card class="breadcrumb-card">
					<div slot="header" class="breadcrumb-header fs-14">订单地址</div>
					<el-table size="small" :data="orderAddressList" style="width: 100%">
						<el-table-column prop="receiverName" label="收货人" width="120"/>
						<el-table-column prop="phone" label="电话" width="120"/>
						<el-table-column prop="address" label="地址">
							<template slot-scope="scope">
								<span>{{scope.row.provinceName+scope.row.cityName+scope.row.areaName+scope.row.address}}</span>
							</template>
						</el-table-column>	
					</el-table>
				</el-card>
				<!-- 操作记录 -->
				<el-card class="breadcrumb-card mb100">
					<div slot="header" class="breadcrumb-header fs-14">操作记录</div>
					<el-table size="small" :data="orderOperateHistoryList" style="width: 100%">
						<el-table-column prop="operateMan" label="操作人" width="120"/>
						<el-table-column prop="operateNote" label="操作内容" width="120"/>
						<el-table-column prop="createTime" label="创建时间"/>
					</el-table>
				</el-card>
				<div class="el-scrollbar-end"></div>
			</el-scrollbar>
		</el-card>	
	</div>
</template>

<script>
import mallOrderApi from '@/api/mallOrderApi'	
	
export default {
	name: 'orderDelivery',
	data () {
		return {
			formHeight: 0,
			orderInfo: {},
			/* 订单基本信息 */
			orderInfoList: [],
			/* 订单商品 */
			orderItemList: [],
			/* 订单地址 */
			orderAddressList: [],
			/* 订单操作记录 */
			orderOperateHistoryList: []
		}
	},
	mounted () {
		this.$nextTick(() => { 
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.formHeight = h -80;
		});
	},
	created () {
		this.getDetail()
	},
	methods: {
		/* 获取订单详情 */
		async getDetail() {
			const result = await mallOrderApi.orderDetail(this.$route.query.id);
			this.orderInfo = result.data;
			this.orderInfoList.push(result.data);
			this.orderItemList = result.data.orderItemList;
			this.orderAddressList.push(result.data.mallOrderAddress);
			this.orderOperateHistoryList = result.data.mallOrderOperateHistoryList;
		},
		/* 发货 */
		async handleDelivery() {
			this.$confirm('订单：'+this.orderInfo.orderSn+' 确认发货?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const result = await mallOrderApi.orderDelivery({orderId: this.$route.query.id});
				if(result.code == 200){
					this.$message.success('发货成功!');
					this.$router.back();
				}else{
					this.$message.error(result.msg);
				}
			}).catch(() => {});
		}
	}
}	
</script>

<style lang="scss">
.order-delivery-container{
	.order-time-line{
		margin: 15px 0px;
	}
}	
</style>
